<template>
  <el-row class="bj">
    <el-row>
          <h1>今日相遇，定是缘分，送君一卦，祝君平安。<i class="el-icon-thumb"></i></h1>
    </el-row>
    <el-row class="bj" v-show="showGossips">
      <el-row>
         <el-col :pull="pullVal"><h2>{{divinatoryWords.composition}}</h2></el-col>
      </el-row>
      <el-row>
        <el-col  :push="pushVal" :xs="6" :sm="10" :md="10" :lg="10" >
          <el-row
              class="el-row-g"
              v-for="(item, index) in divinatory"
              :key="index">
            <el-row v-if="item == 1">
              <el-col class="grid-content bg-purple"></el-col>
            </el-row>
            <el-row v-else>
              <el-col  class="grid-content bg-purple-half"></el-col>
              <el-col  class="grid-content bg-purple-half"></el-col>
            </el-row>
          </el-row>
        </el-col>
        <el-col  :push="pullVal" :xs="6" :sm="10" :md="10" :lg="10" >
          <el-descriptions  :column="1">
            <el-descriptions-item label="卦象"
            >{{ divinatoryWords.explanation }}--{{
                divinatoryWords.grade
              }}</el-descriptions-item
            >
            <el-descriptions-item label="推断">{{
                divinatoryWords.infer
              }}</el-descriptions-item>
            <el-descriptions-item label="卦辞">{{
                divinatoryWords.hexagram
              }}</el-descriptions-item>
            <el-descriptions-item label="象辞">{{
                divinatoryWords.elephant
              }}</el-descriptions-item>
            <el-descriptions-item label="运势">{{
                divinatoryWords.fortune
              }}</el-descriptions-item>
            <el-descriptions-item label="爱情">{{
                divinatoryWords.love
              }}</el-descriptions-item>
            <el-descriptions-item label="疾病">{{
                divinatoryWords.disease
              }}</el-descriptions-item>
            <el-descriptions-item label="失物">{{
                divinatoryWords.lostArticles
              }}</el-descriptions-item>
            <el-descriptions-item label="诉讼">{{
                divinatoryWords.litigation
              }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-row>
  </el-row>
</template>
<script>
export default {
  name: "Gossip",
  data() {
    return {
      gossips: require("../../static/gossip.json"),
      divinatoryWords: "",
      divinatory: [],
      pullVal:2,
      pushVal:3,
    };
  },
  props:['showGossips'],
  methods: {
    luck() {
      if (!this.divinatoryWords) {
        this.divinatoryWords = JSON.parse(localStorage.getItem("gossips"));
        if (!this.divinatoryWords) {
          this.divinatoryWords = this.gossips[Math.round(Math.random() * 63)];
          localStorage.setItem("gossips", JSON.stringify(this.divinatoryWords));
        }
        this.divinatory = this.divinatoryWords["code"].split("");
      }
    },
  },
  mounted(){
    this.luck();
  }
};
</script>
<style scoped>
.el-row-g {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  margin-right: 20px;
}
.bg-purple {
  width: 260px;
  background: #000000;
}
.bg-purple-half {
  width: 120px;
  background: #000000;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>
